
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Console: Creating a Console for debugging</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
#basic, #add_to_bottom {
    margin-bottom: 1em;
}

#demo .yui3-console .yui3-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}
#demo .yui3-console .yui3-console-entry-meta {
    margin: 0;
}
</style>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Console: Creating a Console for debugging</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Console: Creating a Console for debugging</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example walks through the basics of setting up and logging messages to a YUI Console instance.  Three Console instances are created with slightly different configurations.  All calls to <code>Y.log(..)</code> will be broadcast to every Console.</p>
	</div>	

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="console_basic_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<div id="demo">
    <h4>Basic Console</h4>
    <div id="basic"></div>
    <p>
        <button type="button" id="toggle_basic">hide console</button>
    </p>

    <h4>New messages added to bottom</h4>
    <div id="add_to_bottom"></div>
    <p>
        <button type="button" id="toggle_atb">show console</button>
    </p>

    <h4>Custom strings</h4>
    <p><em>Rendered in default location (top right)</em></p>
    <p>
        <button type="button" id="toggle_cstrings">show console</button>
    </p>

    <h4>Log some messages</h4>
    <p>
        <input type="text" id="info_text" value="I'm an info message!">
        <button type="button" id="info">log info message</button>
    </p>
    <p>
        <input type="text" id="warn_text" value="I'm a warning!">
        <button type="button" id="warn">log warning</button>
    </p>
    <p>
        <input type="text" id="error_text" value="I'm an error!">
        <button type="button" id="error">log error</button>
    </p>
</div>
<script type="text/javascript">
// Create a YUI instance and request the console module and its dependencies
YUI().use("console", "console-filters", "dd-plugin", function (Y) {

// Create and render the three Console instances
var basic, newOnBottom, customStrings;

basic = new Y.Console({
    style: 'block' // keeps the Console in the page flow as a block element
}).render( '#basic' );

newOnBottom = new Y.Console({
    style: 'inline', // keeps the Console in the page flow as an inline element
    newestOnTop: false,
    visible: false
}).render( "#add_to_bottom" );

customStrings = new Y.Console({
    strings: {
        title : 'Draggable Console with filters!',
        pause : 'Wait',
        clear : 'Flush',
        collapse : 'Shrink',
        expand : 'Grow'
    },
    visible: false
}).plug(Y.Plugin.ConsoleFilters)
  .plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] })
  .render();

// Set up the button listeners
function toggle(e,cnsl) {
    if (cnsl.get('visible')) {
        cnsl.hide();
        this.set('innerHTML','show console');
    } else {
        cnsl.show();
        cnsl.syncUI(); // to handle any UI changes queued while hidden.
        this.set('innerHTML','hide console');
    }
}

function report(e,type) {
    Y.log(this.get('value'),type);
}

// Display a message in the Console for reference
Y.log("Click the buttons below to log messages");

// Pass the corresponding Console instance to the handler as a second arg
Y.on('click', toggle, '#toggle_basic',    null, basic);
Y.on('click', toggle, '#toggle_atb',      null, newOnBottom);
Y.on('click', toggle, '#toggle_cstrings', null, customStrings);

// Set the context of the event handler to the input text node
// for convenience and pass the message type as a second arg
Y.on('click', report, '#info',  Y.one('#info_text'),  'info');
Y.on('click', report, '#warn',  Y.one('#warn_text'),  'warn');
Y.on('click', report, '#error', Y.one('#error_text'), 'error');

});
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
	</div>			
	</div>
		
	<h3>Markup not required</h3>
<p>The primary purpose of the Console is to aid in debugging your application.  As such, it doesn't make much sense to require your page to include markup for something that is not bound for production.</p>

<p><em>However</em>, Console is built on the Widget framework, so it can be rendered into a containing element just as any other Widget.  We'll do that for the first two Consoles, then for the third we'll call <code>render</code> with no input, allowing the default behavior.</p>

<p>For the first two cases, we need to set up some markup.  We'll throw in some placeholder content for the third.</p>

<div id="syntax-ac5a11d39bbed100ad85242b5b3b09b7" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>Basic Console<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;basic&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>New messages added to bottom<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span></div></li><li class="li2"><div class="de2"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;add_to_bottom&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>Custom strings<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">p</span>&gt;&lt;<span class="kw2">em</span>&gt;</span>Rendered in default location (top right)<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">em</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>Basic Console<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span>
<span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;basic&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
&nbsp;
<span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>New messages added to bottom<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span>
<span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;add_to_bottom&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
&nbsp;
<span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>Custom strings<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span>
<span class="sc2">&lt;<span class="kw2">p</span>&gt;&lt;<span class="kw2">em</span>&gt;</span>Rendered in default location (top right)<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">em</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></pre></div><textarea id="syntax-ac5a11d39bbed100ad85242b5b3b09b7-plain"><h4>Basic Console</h4>
<div id="basic"></div>

<h4>New messages added to bottom</h4>
<div id="add_to_bottom"></div>

<h4>Custom strings</h4>
<p><em>Rendered in default location (top right)</em></p></textarea></div>
<p>Then instantiate the Console instances.</p>

<div id="syntax-e9408cc194ed84c91b6ddbe3066c233e" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Create a YUI instance and request the console module and its dependencies</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;console&quot;</span><span class="sy0">,</span> <span class="st0">&quot;console-filters&quot;</span><span class="sy0">,</span> <span class="st0">&quot;dd-plugin&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Create and render the three Console instances</span></div></li><li class="li2"><div class="de2"><span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">basic <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    style<span class="sy0">:</span> <span class="st0">'block'</span> <span class="co1">// keeps the Console in the page flow as a block element</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#basic&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">// note the inline render()</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">newOnBottom <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    style<span class="sy0">:</span> <span class="st0">'inline'</span><span class="sy0">,</span> <span class="co1">// keeps the Console in the page flow as an inline element</span></div></li><li class="li1"><div class="de1">    newestOnTop<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    visible<span class="sy0">:</span> <span class="kw2">false</span>   <span class="co1">// hidden at instantiation</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#add_to_bottom&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">customStrings <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    strings<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        title <span class="sy0">:</span> <span class="st0">'Console with custom strings!'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        pause <span class="sy0">:</span> <span class="st0">'Wait'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        clear <span class="sy0">:</span> <span class="st0">'Flush'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        collapse <span class="sy0">:</span> <span class="st0">'Shrink'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        expand <span class="sy0">:</span> <span class="st0">'Grow'</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    visible<span class="sy0">:</span> <span class="kw2">false</span>  <span class="co1">// hidden at instantiation</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">ConsoleFilters</span><span class="br0">&#41;</span></div></li><li class="li1"><div class="de1">  .<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">Drag</span><span class="sy0">,</span> <span class="br0">&#123;</span> handles<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">'.yui3-console-hd'</span><span class="br0">&#93;</span> <span class="br0">&#125;</span><span class="br0">&#41;</span></div></li><li class="li1"><div class="de1">  .<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Create a YUI instance and request the console module and its dependencies</span>
YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;console&quot;</span><span class="sy0">,</span> <span class="st0">&quot;console-filters&quot;</span><span class="sy0">,</span> <span class="st0">&quot;dd-plugin&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
<span class="co1">// Create and render the three Console instances</span>
<span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span>
&nbsp;
basic <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    style<span class="sy0">:</span> <span class="st0">'block'</span> <span class="co1">// keeps the Console in the page flow as a block element</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#basic&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">// note the inline render()</span>
&nbsp;
newOnBottom <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    style<span class="sy0">:</span> <span class="st0">'inline'</span><span class="sy0">,</span> <span class="co1">// keeps the Console in the page flow as an inline element</span>
    newestOnTop<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span>
    visible<span class="sy0">:</span> <span class="kw2">false</span>   <span class="co1">// hidden at instantiation</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#add_to_bottom&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
customStrings <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    strings<span class="sy0">:</span> <span class="br0">&#123;</span>
        title <span class="sy0">:</span> <span class="st0">'Console with custom strings!'</span><span class="sy0">,</span>
        pause <span class="sy0">:</span> <span class="st0">'Wait'</span><span class="sy0">,</span>
        clear <span class="sy0">:</span> <span class="st0">'Flush'</span><span class="sy0">,</span>
        collapse <span class="sy0">:</span> <span class="st0">'Shrink'</span><span class="sy0">,</span>
        expand <span class="sy0">:</span> <span class="st0">'Grow'</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
    visible<span class="sy0">:</span> <span class="kw2">false</span>  <span class="co1">// hidden at instantiation</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">ConsoleFilters</span><span class="br0">&#41;</span>
  .<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">Drag</span><span class="sy0">,</span> <span class="br0">&#123;</span> handles<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">'.yui3-console-hd'</span><span class="br0">&#93;</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>
  .<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-e9408cc194ed84c91b6ddbe3066c233e-plain">// Create a YUI instance and request the console module and its dependencies
YUI().use("console", "console-filters", "dd-plugin", function (Y) {

// Create and render the three Console instances
var basic, newOnBottom, customStrings;

basic = new Y.Console({
    style: 'block' // keeps the Console in the page flow as a block element
}).render( "#basic" ); // note the inline render()

newOnBottom = new Y.Console({
    style: 'inline', // keeps the Console in the page flow as an inline element
    newestOnTop: false,
    visible: false   // hidden at instantiation
}).render( "#add_to_bottom" );

customStrings = new Y.Console({
    strings: {
        title : 'Console with custom strings!',
        pause : 'Wait',
        clear : 'Flush',
        collapse : 'Shrink',
        expand : 'Grow'
    },
    visible: false  // hidden at instantiation
}).plug(Y.Plugin.ConsoleFilters)
  .plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] })
  .render();

});</textarea></div>
<h3>Log some messages</h3>
<p>In your code, inserting calls to <code>Y.log(..)</code> will cause the content of those log messages to be broadcast to every Console instance present in the YUI instance.  We'll illustrate this by creating some buttons to log various types of messages.</p>

<div id="syntax-63148acacc436e29a93a6a67c0bf43c9" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Create a YUI instance and request the console module and its dependencies</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;console&quot;</span><span class="sy0">,</span> <span class="st0">&quot;console-filters&quot;</span><span class="sy0">,</span> <span class="st0">&quot;dd-plugin&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Create and render the three Console instances</span></div></li><li class="li2"><div class="de2"><span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">...</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">function</span> report<span class="br0">&#40;</span>e<span class="sy0">,</span>type<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="br0">&#41;</span><span class="sy0">,</span>type<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Set the context of the event handler to the input text node</span></div></li><li class="li1"><div class="de1"><span class="co1">// for convenience and pass the message type as a second arg</span></div></li><li class="li2"><div class="de2">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#info'</span><span class="sy0">,</span>  Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#info_text'</span><span class="br0">&#41;</span><span class="sy0">,</span>  <span class="st0">'info'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#warn'</span><span class="sy0">,</span>  Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#warn_text'</span><span class="br0">&#41;</span><span class="sy0">,</span>  <span class="st0">'warn'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#error'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#error_text'</span><span class="br0">&#41;</span><span class="sy0">,</span> <span class="st0">'error'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Create a YUI instance and request the console module and its dependencies</span>
YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;console&quot;</span><span class="sy0">,</span> <span class="st0">&quot;console-filters&quot;</span><span class="sy0">,</span> <span class="st0">&quot;dd-plugin&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
<span class="co1">// Create and render the three Console instances</span>
<span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span>
&nbsp;
...
&nbsp;
<span class="kw2">function</span> report<span class="br0">&#40;</span>e<span class="sy0">,</span>type<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="br0">&#41;</span><span class="sy0">,</span>type<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="co1">// Set the context of the event handler to the input text node</span>
<span class="co1">// for convenience and pass the message type as a second arg</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#info'</span><span class="sy0">,</span>  Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#info_text'</span><span class="br0">&#41;</span><span class="sy0">,</span>  <span class="st0">'info'</span><span class="br0">&#41;</span><span class="sy0">;</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#warn'</span><span class="sy0">,</span>  Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#warn_text'</span><span class="br0">&#41;</span><span class="sy0">,</span>  <span class="st0">'warn'</span><span class="br0">&#41;</span><span class="sy0">;</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#error'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#error_text'</span><span class="br0">&#41;</span><span class="sy0">,</span> <span class="st0">'error'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-63148acacc436e29a93a6a67c0bf43c9-plain">// Create a YUI instance and request the console module and its dependencies
YUI().use("console", "console-filters", "dd-plugin", function (Y) {

// Create and render the three Console instances
var basic, newOnBottom, customStrings;

...

function report(e,type) {
    Y.log(this.get('value'),type);
}

// Set the context of the event handler to the input text node
// for convenience and pass the message type as a second arg
Y.on('click', report, '#info',  Y.one('#info_text'),  'info');
Y.on('click', report, '#warn',  Y.one('#warn_text'),  'warn');
Y.on('click', report, '#error', Y.one('#error_text'), 'error');

});</textarea></div>
<h3 id="full_code_listing">Full Code Listing</h3>

<h4>Markup</h4>

<div id="syntax-257efe9b280e290d4b6ca6721d4f9846" class="yui-syntax-highlight yui-syntax-highlight-linenumbers"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>Basic Console<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;basic&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;toggle_basic&quot;</span>&gt;</span>hide console<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>New messages added to bottom<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;add_to_bottom&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li2"><div class="de2">    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;toggle_atb&quot;</span>&gt;</span>show console<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>Custom strings<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span></div></li><li class="li2"><div class="de2">    <span class="sc2">&lt;<span class="kw2">p</span>&gt;&lt;<span class="kw2">em</span>&gt;</span>Rendered in default location (top right)<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">em</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;toggle_cstrings&quot;</span>&gt;</span>show console<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>Log some messages<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;info_text&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;I'm an info message!&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;info&quot;</span>&gt;</span>log info message<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li2"><div class="de2">    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;warn_text&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;I'm a warning!&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;warn&quot;</span>&gt;</span>log warning<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;error_text&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;I'm an error!&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;error&quot;</span>&gt;</span>log error<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>Basic Console<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;basic&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;toggle_basic&quot;</span>&gt;</span>hide console<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
&nbsp;
    <span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>New messages added to bottom<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;add_to_bottom&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;toggle_atb&quot;</span>&gt;</span>show console<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
&nbsp;
    <span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>Custom strings<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">p</span>&gt;&lt;<span class="kw2">em</span>&gt;</span>Rendered in default location (top right)<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">em</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;toggle_cstrings&quot;</span>&gt;</span>show console<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
&nbsp;
    <span class="sc2">&lt;<span class="kw2">h4</span>&gt;</span>Log some messages<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">h4</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;info_text&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;I'm an info message!&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;info&quot;</span>&gt;</span>log info message<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;warn_text&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;I'm a warning!&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;warn&quot;</span>&gt;</span>log warning<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;error_text&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;I'm an error!&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">button</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;button&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;error&quot;</span>&gt;</span>log error<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">button</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></pre></div><textarea id="syntax-257efe9b280e290d4b6ca6721d4f9846-plain"><div id="demo">
    <h4>Basic Console</h4>
    <div id="basic"></div>
    <p>
        <button type="button" id="toggle_basic">hide console</button>
    </p>

    <h4>New messages added to bottom</h4>
    <div id="add_to_bottom"></div>
    <p>
        <button type="button" id="toggle_atb">show console</button>
    </p>

    <h4>Custom strings</h4>
    <p><em>Rendered in default location (top right)</em></p>
    <p>
        <button type="button" id="toggle_cstrings">show console</button>
    </p>

    <h4>Log some messages</h4>
    <p>
        <input type="text" id="info_text" value="I'm an info message!">
        <button type="button" id="info">log info message</button>
    </p>
    <p>
        <input type="text" id="warn_text" value="I'm a warning!">
        <button type="button" id="warn">log warning</button>
    </p>
    <p>
        <input type="text" id="error_text" value="I'm an error!">
        <button type="button" id="error">log error</button>
    </p>
</div></textarea></div>
<h4>JavaScript</h4>

<div id="syntax-cc7533c1295b3c01f29517440ca51cac" class="yui-syntax-highlight yui-syntax-highlight-linenumbers"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Create a YUI instance and request the console module and its dependencies</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;console&quot;</span><span class="sy0">,</span> <span class="st0">&quot;console-filters&quot;</span><span class="sy0">,</span> <span class="st0">&quot;dd-plugin&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Create and render the three Console instances</span></div></li><li class="li2"><div class="de2"><span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">basic <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    style<span class="sy0">:</span> <span class="st0">'block'</span> <span class="co1">// keeps the Console in the page flow as a block element</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#basic&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">newOnBottom <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    style<span class="sy0">:</span> <span class="st0">'inline'</span><span class="sy0">,</span> <span class="co1">// keeps the Console in the page flow as an inline element</span></div></li><li class="li1"><div class="de1">    newestOnTop<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    visible<span class="sy0">:</span> <span class="kw2">false</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#add_to_bottom&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">customStrings <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    strings<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        title <span class="sy0">:</span> <span class="st0">'Draggable Console with filters!'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        pause <span class="sy0">:</span> <span class="st0">'Wait'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        clear <span class="sy0">:</span> <span class="st0">'Flush'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        collapse <span class="sy0">:</span> <span class="st0">'Shrink'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        expand <span class="sy0">:</span> <span class="st0">'Grow'</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    visible<span class="sy0">:</span> <span class="kw2">false</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">ConsoleFilters</span><span class="br0">&#41;</span></div></li><li class="li1"><div class="de1">  .<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">Drag</span><span class="sy0">,</span> <span class="br0">&#123;</span> handles<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">'.yui3-console-hd'</span><span class="br0">&#93;</span> <span class="br0">&#125;</span><span class="br0">&#41;</span></div></li><li class="li1"><div class="de1">  .<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="co1">// Set up the button listeners</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> toggle<span class="br0">&#40;</span>e<span class="sy0">,</span>cnsl<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>cnsl.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'visible'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        cnsl.<span class="me1">hide</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span><span class="st0">'show console'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        cnsl.<span class="me1">show</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        cnsl.<span class="me1">syncUI</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">// to handle any UI changes queued while hidden.</span></div></li><li class="li1"><div class="de1">        <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span><span class="st0">'hide console'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">function</span> report<span class="br0">&#40;</span>e<span class="sy0">,</span>type<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="br0">&#41;</span><span class="sy0">,</span>type<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Display a message in the Console for reference</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">&quot;Click the buttons below to log messages&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Pass the corresponding Console instance to the handler as a second arg</span></div></li><li class="li2"><div class="de2">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> toggle<span class="sy0">,</span> <span class="st0">'#toggle_basic'</span><span class="sy0">,</span>    <span class="kw2">null</span><span class="sy0">,</span> basic<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> toggle<span class="sy0">,</span> <span class="st0">'#toggle_atb'</span><span class="sy0">,</span>      <span class="kw2">null</span><span class="sy0">,</span> newOnBottom<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> toggle<span class="sy0">,</span> <span class="st0">'#toggle_cstrings'</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> customStrings<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Set the context of the event handler to the input text node</span></div></li><li class="li2"><div class="de2"><span class="co1">// for convenience and pass the message type as a second arg</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#info'</span><span class="sy0">,</span>  Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#info_text'</span><span class="br0">&#41;</span><span class="sy0">,</span>  <span class="st0">'info'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#warn'</span><span class="sy0">,</span>  Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#warn_text'</span><span class="br0">&#41;</span><span class="sy0">,</span>  <span class="st0">'warn'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#error'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#error_text'</span><span class="br0">&#41;</span><span class="sy0">,</span> <span class="st0">'error'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Create a YUI instance and request the console module and its dependencies</span>
YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;console&quot;</span><span class="sy0">,</span> <span class="st0">&quot;console-filters&quot;</span><span class="sy0">,</span> <span class="st0">&quot;dd-plugin&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
<span class="co1">// Create and render the three Console instances</span>
<span class="kw2">var</span> basic<span class="sy0">,</span> newOnBottom<span class="sy0">,</span> customStrings<span class="sy0">;</span>
&nbsp;
basic <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    style<span class="sy0">:</span> <span class="st0">'block'</span> <span class="co1">// keeps the Console in the page flow as a block element</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#basic&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
newOnBottom <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    style<span class="sy0">:</span> <span class="st0">'inline'</span><span class="sy0">,</span> <span class="co1">// keeps the Console in the page flow as an inline element</span>
    newestOnTop<span class="sy0">:</span> <span class="kw2">false</span><span class="sy0">,</span>
    visible<span class="sy0">:</span> <span class="kw2">false</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span> <span class="st0">&quot;#add_to_bottom&quot;</span> <span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
customStrings <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Console</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    strings<span class="sy0">:</span> <span class="br0">&#123;</span>
        title <span class="sy0">:</span> <span class="st0">'Draggable Console with filters!'</span><span class="sy0">,</span>
        pause <span class="sy0">:</span> <span class="st0">'Wait'</span><span class="sy0">,</span>
        clear <span class="sy0">:</span> <span class="st0">'Flush'</span><span class="sy0">,</span>
        collapse <span class="sy0">:</span> <span class="st0">'Shrink'</span><span class="sy0">,</span>
        expand <span class="sy0">:</span> <span class="st0">'Grow'</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
    visible<span class="sy0">:</span> <span class="kw2">false</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">ConsoleFilters</span><span class="br0">&#41;</span>
  .<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">Drag</span><span class="sy0">,</span> <span class="br0">&#123;</span> handles<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">'.yui3-console-hd'</span><span class="br0">&#93;</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>
  .<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Set up the button listeners</span>
<span class="kw2">function</span> toggle<span class="br0">&#40;</span>e<span class="sy0">,</span>cnsl<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span>cnsl.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'visible'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        cnsl.<span class="me1">hide</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span><span class="st0">'show console'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
        cnsl.<span class="me1">show</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        cnsl.<span class="me1">syncUI</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">// to handle any UI changes queued while hidden.</span>
        <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span><span class="st0">'hide console'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="kw2">function</span> report<span class="br0">&#40;</span>e<span class="sy0">,</span>type<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="br0">&#41;</span><span class="sy0">,</span>type<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="co1">// Display a message in the Console for reference</span>
Y.<span class="me1">log</span><span class="br0">&#40;</span><span class="st0">&quot;Click the buttons below to log messages&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Pass the corresponding Console instance to the handler as a second arg</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> toggle<span class="sy0">,</span> <span class="st0">'#toggle_basic'</span><span class="sy0">,</span>    <span class="kw2">null</span><span class="sy0">,</span> basic<span class="br0">&#41;</span><span class="sy0">;</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> toggle<span class="sy0">,</span> <span class="st0">'#toggle_atb'</span><span class="sy0">,</span>      <span class="kw2">null</span><span class="sy0">,</span> newOnBottom<span class="br0">&#41;</span><span class="sy0">;</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> toggle<span class="sy0">,</span> <span class="st0">'#toggle_cstrings'</span><span class="sy0">,</span> <span class="kw2">null</span><span class="sy0">,</span> customStrings<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Set the context of the event handler to the input text node</span>
<span class="co1">// for convenience and pass the message type as a second arg</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#info'</span><span class="sy0">,</span>  Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#info_text'</span><span class="br0">&#41;</span><span class="sy0">,</span>  <span class="st0">'info'</span><span class="br0">&#41;</span><span class="sy0">;</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#warn'</span><span class="sy0">,</span>  Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#warn_text'</span><span class="br0">&#41;</span><span class="sy0">,</span>  <span class="st0">'warn'</span><span class="br0">&#41;</span><span class="sy0">;</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> report<span class="sy0">,</span> <span class="st0">'#error'</span><span class="sy0">,</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#error_text'</span><span class="br0">&#41;</span><span class="sy0">,</span> <span class="st0">'error'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-cc7533c1295b3c01f29517440ca51cac-plain">// Create a YUI instance and request the console module and its dependencies
YUI().use("console", "console-filters", "dd-plugin", function (Y) {

// Create and render the three Console instances
var basic, newOnBottom, customStrings;

basic = new Y.Console({
    style: 'block' // keeps the Console in the page flow as a block element
}).render( "#basic" );

newOnBottom = new Y.Console({
    style: 'inline', // keeps the Console in the page flow as an inline element
    newestOnTop: false,
    visible: false
}).render( "#add_to_bottom" );

customStrings = new Y.Console({
    strings: {
        title : 'Draggable Console with filters!',
        pause : 'Wait',
        clear : 'Flush',
        collapse : 'Shrink',
        expand : 'Grow'
    },
    visible: false
}).plug(Y.Plugin.ConsoleFilters)
  .plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] })
  .render();

// Set up the button listeners
function toggle(e,cnsl) {
    if (cnsl.get('visible')) {
        cnsl.hide();
        this.set('innerHTML','show console');
    } else {
        cnsl.show();
        cnsl.syncUI(); // to handle any UI changes queued while hidden.
        this.set('innerHTML','hide console');
    }
}

function report(e,type) {
    Y.log(this.get('value'),type);
}

// Display a message in the Console for reference
Y.log("Click the buttons below to log messages");

// Pass the corresponding Console instance to the handler as a second arg
Y.on('click', toggle, '#toggle_basic',    null, basic);
Y.on('click', toggle, '#toggle_atb',      null, newOnBottom);
Y.on('click', toggle, '#toggle_cstrings', null, customStrings);

// Set the context of the event handler to the input text node
// for convenience and pass the message type as a second arg
Y.on('click', report, '#info',  Y.one('#info_text'),  'info');
Y.on('click', report, '#warn',  Y.one('#warn_text'),  'warn');
Y.on('click', report, '#error', Y.one('#error_text'), 'error');

});</textarea></div>
<h4>CSS</h4>

<div id="syntax-d8099f48c05909c3703f241d708d7d31" class="yui-syntax-highlight yui-syntax-highlight-linenumbers"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Override default positioning for two of the example Consoles */</span></div></li><li class="li1"><div class="de1"><span class="re0">#basic</span><span class="sy0">,</span> <span class="re0">#add_to_bottom</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">1em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="coMULTI">/* Reapply some style settings that were overridden by the page chrome */</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui3-console</span> <span class="re1">.yui3-console-title</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">border</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#000</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">13px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">font-weight</span><span class="sy0">:</span> <span class="kw2">bold</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">text-transform</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2"><span class="re0">#demo</span> <span class="re1">.yui3-console</span> <span class="re1">.yui3-console-entry-meta</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/* Override default positioning for two of the example Consoles */</span>
<span class="re0">#basic</span><span class="sy0">,</span> <span class="re0">#add_to_bottom</span> <span class="br0">&#123;</span>
    <span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">1em</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="coMULTI">/* Reapply some style settings that were overridden by the page chrome */</span>
<span class="re0">#demo</span> <span class="re1">.yui3-console</span> <span class="re1">.yui3-console-title</span> <span class="br0">&#123;</span>
    <span class="kw1">border</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">none</span><span class="sy0">;</span>
    <span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#000</span><span class="sy0">;</span>
    <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">13px</span><span class="sy0">;</span>
    <span class="kw1">font-weight</span><span class="sy0">:</span> <span class="kw2">bold</span><span class="sy0">;</span>
    <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
    <span class="kw1">text-transform</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
<span class="re0">#demo</span> <span class="re1">.yui3-console</span> <span class="re1">.yui3-console-entry-meta</span> <span class="br0">&#123;</span>
    <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-d8099f48c05909c3703f241d708d7d31-plain">/* Override default positioning for two of the example Consoles */
#basic, #add_to_bottom {
    margin-bottom: 1em;
}

/* Reapply some style settings that were overridden by the page chrome */
#demo .yui3-console .yui3-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}
#demo .yui3-console .yui3-console-entry-meta {
    margin: 0;
}</textarea></div>				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Console Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li class='selected'><a href='../console/console_basic.html'>Creating a Console for debugging</a></li><li><a href='../console/console_yui_config.html'>YUI configuration to filter log messages</a></li><li><a href='../console/console_global.html'>Creating a universal Console</a></li><li><a href='../console-filters/console-filters_intro.html'>Using the ConsoleFilters plugin (included with examples for Plugin.ConsoleFilters)</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More Console Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/console/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_console.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Tabview - Functional Examples" href="../../examples/tabview/index.html">Tabview <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="selected "><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2010 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = {};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
